<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点题器</title>
    <style>
        button {
            width: 80px;
            height: 30px;
            font-size: 16px;
        }

        div {
            min-width: 100px;
            height: 80px;
            background-color: aqua;
            border: 5px solid gold;
            text-align: center;
            line-height: 80px;
        }
    </style>
</head>

<body>
    <button>随机点题</button>
    <div></div>
</body>
<script>
    var questions = [
        "将json字符串 '{'name':'zs'}'转为json对象的语法？",
        "this指向有哪些？ 改变this指向的方法有哪些？",
        "let和var的区别？let和const的区别？",
        "简述for..in循环和for..of循环的区别？",
        "简述字符串中和正则 相关的api，并简述含义和返回值？",
        "写一个正则，用于匹配任意一个或者多个数字？",
        "什么是事件对象，写出鼠标事件对象的属性有哪些？区别是什么？",
        "写出键盘事件对象的属性有哪些？",
        "什么是事件委托，事件委托的好处是什么？",
        "写出鼠标事件类型，键盘事件类型，表单事件类型？",
        "事件绑定的方式有哪些？区别是什么？",
        "DOM操作样式时，获取样式的语法有哪些,含义是？",
        "DOM操作属性时，操作属性的语法有哪些？",
        "DOM的创建元素节点，尾部追加，插入，克隆，替换，的语法？",
        "写出数组中能改变原数组的api有哪些？",
        "什么样的函数可以改造成箭头函数，怎么改？",
        "基本数据类型和引用数据类型的区别？"
    ];

    var oBtn = document.querySelector('button');
    var oDiv = document.querySelector('div');

    oBtn.onclick = function () {
       var randomQuestion=questions[parseInt(Math.random() * questions.length)]
       oDiv.textContent=randomQuestion
    }
    // function getIndex() {
    //     return parseInt(Math.random() * questions.length)
    // }
</script>

</html>